<!--
   Created by IntelliJ IDEA.
   @File header.html
   @Auth liuxing
   @Date 2021/8/22,15:04
   @Email liuxing997@foxmail.com
-->
<!-- top navigation -->
<div class="top_nav" id="header">
    <input type="hidden" id="userId" th:value="${session.user.id}"/>
    <div class="nav_menu">
        <div class="nav toggle">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
        </div>
        <nav class="nav navbar-nav">
            <ul class=" navbar-right">
                <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown"
                       data-toggle="dropdown" aria-expanded="false">
                        <span th:if="${session.user.userImage} == null">
							<img name="userImage" src="/images/img.jpg" alt=""/>
						</span>
                        <span th:if="${session.user.userImage} != null">
							<img name="userImage" th:src="${session.user.userImage}" alt=""/>
						</span>
                        <span name="userName" th:text="${session.user.userName}"></span>
                    </a>
                    <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/account/profile"> Profile</a>
                        <a class="dropdown-item" href="javascript:;" @click="logout"><i
                                class="fa fa-sign-out pull-right"></i> Log Out</a>
                    </div>
                </li>

                <li role="presentation" class="nav-item dropdown open">
                    <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1"
                       data-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-envelope-o"></i>
                        <span class="badge bg-green">2</span>
                    </a>
                    <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                        <li class="nav-item">
                            <a class="dropdown-item">
                                <span class="image"><img src="/images/img.jpg" alt="Profile Image"/></span>
                                <span>
                                    <span>Liu Xing</span>
                                    <span class="time">3 mins ago</span>
                                </span>
                                <span class="message">
                                    Film festivals used to be do-or-die moments for movie makers. They were where...
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="dropdown-item">
                                <span class="image"><img src="/images/img.jpg" alt="Profile Image"/></span>
                                <span>
                                    <span>Liu Xing</span>
                                    <span class="time">3 mins ago</span>
                                </span>
                                <span class="message">
                                    Film festivals used to be do-or-die moments for movie makers. They were where...
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <div class="text-center">
                                <a class="dropdown-item">
                                    <strong>See All Alerts</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- /top navigation -->

<script>
    let header = new Vue({
        el: '#header',
        methods: {
            logout() {
                this.$confirm('确定要退出吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this;
                    $.ajax({
                        url: "/api/logout",
                        success: function (res) {
                            that.$message({
                                type: 'success',
                                message: res.message
                            });
                            window.location.href = "/login";
                        },
                        error: function (err) {
                            that.$message({
                                type: 'error',
                                message: "退出失败！"
                            });
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '保持登录'
                    });
                });
            }
        }
    });
</script>